<template>
  <t-modal
    title="选择图纸/模型"
    width="900px"
    :visible="visible"
    @ok="onSubmit()"
    @cancel="closeModal()"
    wrapClassName="add-modal-container"
    forceRender
    v-bind:confirmLoading="confirmLoading"
    v-bind="footer"
  >
    <div class="curve-modal-body">
      <div class="name">图纸/模型：</div>
      <div class="file-list">
        <div class="file-item" v-for="(item, index) in fileList" :key="index">
          <a-radio
            :checked="item.$$check"
            @change="changeRadio($event, item, index)"
          >
          </a-radio>
          <div class="file-icon" :class="[filterIcon(item)]"></div>
          <div class="file-content">
            {{ item[replaceFields.fileName] }}
          </div>
          <div class="file-operate">
            <!-- 预览 -->
            <div
              class="file-button preview-button"
              @click="viewFile(item)"
            ></div>
            <!-- 下载 -->
            <div
              class="file-button download-button"
              @click="downloadFile(item)"
            >
              <a-icon
                type="download"
                :style="{
                  fontSize: '16px',
                  color: '#FF3F4A',
                }"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 单文件预览弹窗 -->
    <previewModal
      ref="previewModal"
      :visible.sync="previewModal.visible"
      :loading="previewModal.loading"
    ></previewModal>
  </t-modal>
</template>

<script>
import { axios } from "@/utils/request";
import { mapGetters } from "vuex";
import { getToken, downloadDfs } from "@/utils/TopVUI";
//单文件预览
import previewModal from "@/pages/document/minio/previewModal";
export default {
  components: {
    previewModal,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    parameter: {
      type: Object,
      default: () => {
        return {};
      },
    },
    replaceFields: {
      type: Object,
      default: () => {
        return {
          fileName: "fileName",
        };
      },
    },
  },

  data() {
    return {
      confirmLoading: false,
      footer: {},
      form: {},
      fileList: [],
      //单文件预览
      previewModal: {
        visible: false,
        loading: false,
      },
    };
  },
  computed: {
    ...mapGetters(["configData", "userInfo"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getDrawingData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    changeRadio(ev, item, index) {
      this.fileList.forEach((v) => {
        v.$$check = false;
      });
      this.fileList[index].$$check = !this.fileList[index].$$check;
    },

    //图纸
    getDrawingData() {
      let { uuid } = this.parameter;
      axios
        .post(
          `/probusiness/drawingReview/getMarkCadList?uuid=${uuid}`,
          {},
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          this.fileList = res?.data ?? [];
          this.fileList.forEach((item) => {
            this.$set(item, "$$check", false);
          });
        })
        .catch((_) => {
          this.fileList = [];
        });
    },

    //提交
    onSubmit() {
      let valid = this.fileList.some((v) => v.$$check);
      if (!valid) {
        this.$message.info("请先选择图纸/模型");
        return;
      }
      let current = this.fileList.find((v) => v.$$check);
      this.$emit("submit", {
        current,
        list: this.fileList,
        ...this.parameter,
      });
      this.closeModal();
    },
    //关闭弹窗
    closeModal() {
      this.fileList = [];
      this.$emit("update:visible", false);
    },
    //文件icon
    filterIcon(item) {
      let { fileName } = this.replaceFields;
      let lastIdx = item[fileName].lastIndexOf(".");
      let fileType = "." + item[fileName].substring(lastIdx + 1);
      if (fileType) fileType = fileType.toLowerCase();
      switch (fileType) {
        case ".pdf":
          return "pdf";
        case ".doc":
        case ".docx":
          return "doc";
        case ".xls":
        case ".xlsx":
          return "xls";
        case ".ppt":
        case ".pptx":
        case ".pps":
          return "ppt";
        case ".png":
        case ".jpg":
        case ".jpeg":
        case ".bmp":
        case ".gif":
          return "image";
        case ".txt":
          return "txt";
        case ".zip":
        case ".rar":
          return "zip";
        case ".mp3":
        case ".wav":
        case ".wmv":
          return "music";
        case ".mp4":
        case ".m2v":
        case ".mkv":
          return "video";
        default:
          return "annex";
      }
    },
    //预览
    viewFile(file) {
      let { previewWay, fileName, url, uuid, unit, bimCadFile } = file;
      let domain = location.origin;
      switch (previewWay) {
        //cad预览
        case "cad":
          window.open(
            `${domain}/#/blackHole/previewCad?uuid=${uuid}&fileName=${fileName}&unit=${unit}`
          );
          return;
        // 模型预览
        case "model":
          let { bhDataSetId } = bimCadFile || {};
          bhDataSetId &&
            window.open(
              `${domain}/#/blackHole/viewDataSetSingleSimple?dataSetId=${bhDataSetId}&name=${fileName}`
            );
          return;
        // 普通文件预览
        default:
          this.previewModal.loading = true;
          this.$refs.previewModal.type = "file";
          this.$refs.previewModal.fileUrl =
            this.kkFileView +
            "/onlinePreview?url=" +
            encodeURIComponent(Base64.encode(url)) +
            "&watermarkTxt=" +
            //水印内容
            encodeURIComponent("") +
            "&token=" +
            getToken();
          this.previewModal.visible = true;
          this.previewModal.loading = false;
          break;
      }
    },

    //下载
    downloadFile(files) {
      let { url } = files;
      downloadDfs(url);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 0 !important;
  }
  .curve-modal-body {
    padding: 14px;
    box-sizing: border-box;
    max-height: 700px;
    overflow: hidden;
    overflow-y: auto;
    display: flex;
    .name {
      text-align: right;
      min-width: 80px;
      font-size: 14px;
      color: #666666;
      padding-top: 4px;
    }
    .file-list {
      flex: 1;
      display: flex;
      flex-direction: column;
      .file-item {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 10px;
        background: #f2f2f2;
        border-radius: 4px 4px 4px 4px;
        align-items: center;
        height: 32px;
        position: relative;
        margin-bottom: 8px;
        .file-icon {
          width: 20px;
          height: 20px;
          margin-right: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          overflow: hidden;
          &.pdf {
            background: url("~@/assets/img/fileIcon/pdf.png");
            background-size: 100% 100%;
          }
          &.doc {
            background: url("~@/assets/img/fileIcon/doc.png");
            background-size: 100% 100%;
          }
          &.xls {
            background: url("~@/assets/img/fileIcon/xls.png");
            background-size: 100% 100%;
          }
          &.ppt {
            background: url("~@/assets/img/fileIcon/ppt.png");
            background-size: 100% 100%;
          }
          &.image {
            background: url("~@/assets/img/fileIcon/image.png");
            background-size: 100% 100%;
          }
          &.txt {
            background: url("~@/assets/img/fileIcon/txt.png");
            background-size: 100% 100%;
          }
          &.zip {
            background: url("~@/assets/img/fileIcon/zip.png");
            background-size: 100% 100%;
          }
          &.music {
            background: url("~@/assets/img/fileIcon/music.png");
            background-size: 100% 100%;
          }
          &.video {
            background: url("~@/assets/img/fileIcon/video.png");
            background-size: 100% 100%;
          }
          &.annex {
            background: url("~@/assets/img/fileIcon/annex.png");
            background-size: 100% 100%;
          }
        }
        .file-content {
          flex: 1;
          font-size: 14px;
          font-family: Microsoft YaHe;
          font-weight: 400;
          padding-right: 20px;
          display: flex;
          overflow: hidden;
          .fileName {
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            flex: 1;
            color: #000000;
          }
          .fileSize {
            margin-left: 10px;
            color: #bfbfbf;
          }
        }
        .file-operate {
          display: flex;
          .file-button {
            width: 14px;
            height: 14px;
            cursor: pointer;
            border-radius: 50%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
            &:last-of-type {
              margin-right: 0;
            }
            .anticon {
              transform: scale(0.8);
            }
            &.download-button {
              background: none;
              border-radius: 0;
              .anticon {
                color: @primary-color !important;
                transform: scale(1);
              }
            }
            &.preview-button {
              background: url("~@/assets/img/fileIcon/preview.png");
              background-size: 100% 100%;
              top: 8px;
              right: 40px;
            }
          }
        }
      }
    }
  }
}
</style>
